<template>
  <div class="p-relative p-t-15 p-b-15 p-l-15 p-r-15">
    <div class="p-absolute change-buttons">
      <el-button @click="changeData">修改数据</el-button>
      <el-button @click="changeSize">修改size</el-button>
    </div>
    <div class="p-t-20 p-b-20 p-l-15 p-r-15" id="container"></div>
  </div>
</template>

<script>
import { Line } from '@antv/g2plot'
export default {
    name: 'LineComp',
    data () {
        return {
            data: [
                {
                    'city': '石家庄',
                    'type': '水果',
                    'value': 14500
                },
                {
                    'city': '石家庄',
                    'type': '米面',
                    'value': 8500
                },
                {
                    'city': '石家庄',
                    'type': '特产零食',
                    'value': 10000
                },
                {
                    'city': '石家庄',
                    'type': '茶叶',
                    'value': 7000
                },
                {
                    'city': '深圳',
                    'type': '水果',
                    'value': 9000
                },
                {
                    'city': '深圳',
                    'type': '米面',
                    'value': 8500
                },
                {
                    'city': '深圳',
                    'type': '特产零食',
                    'value': 11000
                },
                {
                    'city': '深圳',
                    'type': '茶叶',
                    'value': 6000
                },
                {
                    'city': '温州',
                    'type': '水果',
                    'value': 16000
                },
                {
                    'city': '温州',
                    'type': '米面',
                    'value': 5000
                },
                {
                    'city': '温州',
                    'type': '特产零食',
                    'value': 6000
                },
                {
                    'city': '温州',
                    'type': '茶叶',
                    'value': 10000
                },
                {
                    'city': '宁波',
                    'type': '水果',
                    'value': 14000
                },
                {
                    'city': '宁波',
                    'type': '米面',
                    'value': 9000
                },
                {
                    'city': '宁波',
                    'type': '特产零食',
                    'value': 10000
                },
                {
                    'city': '宁波',
                    'type': '茶叶',
                    'value': 9000
                },
                {
                    'city': '无锡',
                    'type': '水果',
                    'value': 14000
                },
                {
                    'city': '无锡',
                    'type': '米面',
                    'value': 9000
                },
                {
                    'city': '无锡',
                    'type': '特产零食',
                    'value': 10000
                },
                {
                    'city': '无锡',
                    'type': '茶叶',
                    'value': 6000
                },
                {
                    'city': '杭州',
                    'type': '水果',
                    'value': 9000
                },
                {
                    'city': '杭州',
                    'type': '米面',
                    'value': 8500
                },
                {
                    'city': '杭州',
                    'type': '特产零食',
                    'value': 10000
                },
                {
                    'city': '杭州',
                    'type': '茶叶',
                    'value': 6000
                },
                {
                    'city': '北京',
                    'type': '水果',
                    'value': 17000
                },
                {
                    'city': '北京',
                    'type': '米面',
                    'value': 6000
                },
                {
                    'city': '北京',
                    'type': '特产零食',
                    'value': 7000
                },
                {
                    'city': '北京',
                    'type': '茶叶',
                    'value': 10000
                },
                {
                    'city': '上海',
                    'type': '水果',
                    'value': 18000
                },
                {
                    'city': '上海',
                    'type': '米面',
                    'value': 11000
                },
                {
                    'city': '上海',
                    'type': '特产零食',
                    'value': 15000
                },
                {
                    'city': '上海',
                    'type': '茶叶',
                    'value': 14000
                }
            ],
            line: null
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            const line = new Line('container', {
                // data: this.getData(),
                data: this.data,
                padding: 'auto',
                xField: 'city',
                yField: 'value',
                seriesField: 'type',
                isGroup: 'true',
                legend: {
                    layout: 'horizontal',
                    position: 'top-left'
                },
                colorField: 'type', // 部分图表使用 seriesField
                color: ['#d62728', '#2ca02c', '#000000'], // 线的颜色
                autoFit: true,
                smooth: true
            })
            line.render()
            this.line = line
        },
        changeData () {
            const newData = this.line.options.data.reduce((all, item) => {
                const temp = {
                    ...item,
                    value: (Math.random() + 1) * item.value
                }
                all.push(temp)
                return all
            }, [])
            // 更新数据
            this.line.changeData(newData)
        },
        changeSize () { // 修改container的宽高
            this.line.changeSize(300, 400)
        }
    }
}
</script>

<style lang="scss" scoped>
.change-buttons{
  right: 30px;
  top: 25px;
  z-index: 3;
}
</style>
